<template>
  <div class="flex-col page section">
    <div class="flex-col">
      <c-title :hide="false" text="我的团队"></c-title>
    </div>
    <div class="flex-row justify-center  group">
      <!-- <div class="flex-row justify-center section"></div> -->
      <span class="tabs-item" @click="changeTabs(index)" :class="currentTabs == index ? 'tabs-item-active text_2' : 'text_3'" v-for="(item,index) in tabsList" :key="index">{{ item }}</span>
      <!-- <span class="text_3">团队用户</span> -->
    </div>
    <div class="flex-col group_2 mt-4-5">
      <!-- <div class="self-start section_4"></div> -->
      <div class="flex-col self-stretch group_3">
        <div class="flex-row justify-between items-center relative section_5">
          <div class="flex-row items-center">
            <img class="shrink-0 image_5" src="https://shops.cg500.com/static/niuniu-teamnum-icon.png" />
            <span class="font text_4 ml-5">{{currentTabs == 0 ? '直推用户' : '团队用户'}}</span>
          </div>
          <span class="font text_5">{{allRen}}人</span>
        </div>
        <div class="flex-col list" v-if="currentTabs == 0">
          <div class="flex-row justify-between relative mt-10 list-item" v-for="(item, index) in list" :key="index">
            <div class="flex-row items-center self-center flex-1">
              <img class="image_6" :src="item.avatar" />
              <div class="flex-col group_4 ml-7-5">
                <div class="flex-row items-baseline" style="width: 100%;">
                  <span class="font_3">{{ item.mobile | formatPhoneNumber}}</span>
                  <!-- <span class="font_4 ml-3-5">{{ item.mobile }}</span> -->
                </div>
                <div class="flex-row group_5 mt-11">
                  <div class="flex-col justify-start items-start relative group_6">
                    <!-- <img class="image_7" src="https://ide.code.fun/api/image?token=67451f954ae84d00121dc9f9&name=aa4acf7d7a4e3d158c1e21fe8f25fb2f.png" /> -->
                    <span class="font_6">注册时间</span>
                  </div>
                  <img class="image_8" src="https://shops.cg500.com/static/niuniu-teamnum-list-time.png" />
                  <div class="flex-col justify-start items-center relative group_7">
                    <!-- <img class="image_9" src="https://ide.code.fun/api/image?token=67451f954ae84d00121dc9f9&name=1c65bbee5bdeb6f7ef6c822246d926e8.png" /> -->
                    <span class="font_6">{{ item.create_at }}</span>
                  </div>
                </div>
              </div>
            </div>
            <div style="width: 30%;" class="flex-row justify-end items-end">
              <span class="self-start font_5 text_7">{{ item.rensu }}</span>
            </div>
            
            <!-- <div class="flex-col justify-start items-center text-wrapper pos_7">
              <span class="font_2 text_6">{{ item.num == 1 ? 'A' : item.num == 2 ?  'B' : item.num >= 3 ? `C${Number(item.num)-2}` : ''}}区</span>
            </div> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
    
    <script>
import myTeamController from "./myTeamController";

export default myTeamController;
</script>
    <style>
body {
  /* background: #fff; */
  background-color: #f5f7fa;
}
#app {
  background-color: #f5f7fa;
}
</style>
    
    <style lang="scss" rel="stylesheet/scss" scoped>
::v-deep .van-nav-bar {
  border-bottom: none !important;
  background: rgba(0, 0, 0, 0) !important;
}
::v-deep .van-button--default {
  background: none !important;
}
::v-deep .van-nav-bar__title {
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: #151515 !important;
}
//   @import "../common/common.css";
@import "../../../assets/css/commoncss/common.css";
.mt-4-5 {
  margin-top: 0.28rem;
}
.ml-5 {
  margin-left: 0.31rem;
}
.ml-7-5 {
  margin-left: 0.47rem;
}
.ml-3-5 {
  margin-left: 0.22rem;
}
.mt-11 {
  margin-top: 0.69rem;
}
.page {
  padding-bottom: 7.91rem;
  background-color: #f5f7fa;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
}
.group {
  padding-bottom: 0.094rem;
  padding-top: 0.594rem;
}
.section {
//   background-color: #ffffff;
  background-image: linear-gradient(0deg, #f5f7fa 0%, #e5fcfa 99%, #e5fcfa 100%);
  background-size: 100% 100px;
  background-repeat: no-repeat;
}
.section_2 {
  background-image: linear-gradient(0deg, #f5f7fa 0%, #e5fcfa 99%, #e5fcfa 100%);
  height: 7.13rem;
}
.tabs-item:first-child {
    margin-right: 30px;
}
.tabs-item-active {
    position: relative;
}
.tabs-item-active::after {
    position: absolute;
    content: "";
    left: 50%;
    bottom: -6px;
    transform: translateX(-50%);
    background-color: #008a7f;
    border-radius: 0.094rem;
    width: 1.06rem;
    height: 0.19rem;

}
.image {
  width: 20.47rem;
  height: 0.75rem;
}
.pos {
  position: absolute;
  right: 1.13rem;
  top: 1.03rem;
}
.image_2 {
  width: 0.63rem;
  height: 1.09rem;
}
.pos_3 {
  position: absolute;
  left: 0.59rem;
  bottom: 2.72rem;
}
.text {
  color: #222222;
  font-size: 1.13rem;
  font-family: PingFang SC;
  font-weight: 500;
  line-height: 1.06rem;
}
.pos_4 {
  position: absolute;
  left: 50%;
  bottom: 2.78rem;
  transform: translateX(-50%);
}
.section_3 {
  padding: 0.44rem 0.84rem;
  background-color: #ffffffe6;
  border-radius: 0.99rem;
  width: 5.47rem;
}
.pos_2 {
  position: absolute;
  right: 0.69rem;
  top: 2.94rem;
}
.image_3 {
  width: 1.94rem;
  height: 1.19rem;
}
.image_4 {
  width: 1.09rem;
  height: 1.09rem;
}
.text_2 {
  color: #222222;
  font-size: 1rem;
  font-family: PingFang SC;
  line-height: 0.97rem;
}
.pos_5 {
  position: absolute;
  left: 6.03rem;
  bottom: 0;
}
.text_3 {
  color: #999999;
  font-size: 0.94rem;
  font-family: PingFang SC;
  line-height: 0.88rem;
}
.pos_6 {
  position: absolute;
  right: 6.44rem;
  bottom: 0;
}
.group_2 {
  padding: 0 0.88rem;
}
.section_4 {
  margin-left: 6.44rem;
  background-color: #008a7f;
  border-radius: 0.094rem;
  width: 1.06rem;
  height: 0.19rem;
}
.group_3 {
  padding-top: 0.72rem;
}
.section_5 {
  padding: 1rem 0.84rem 0.78rem;
  background-image: linear-gradient(-49deg, #08c2b4 0%, #02cbba 100%);
  box-shadow: 0rem 0.38rem 0.56rem #08958a1a;
  border-radius: 0.5rem;
}
.image_5 {
  width: 1.22rem;
  height: 1.03rem;
}
.font {
  font-size: 0.81rem;
  font-family: PingFang SC;
  line-height: 0.81rem;
  font-weight: 500;
  color: #ffffff;
}
.text_4 {
  line-height: 0.78rem;
}
.text_5 {
  line-height: 0.78rem;
}
.list {
  padding-top: 1rem;
}
.list-item {
  padding: 1.31rem 0.75rem 1.31rem 1rem;
  background-color: #ffffff;
  border-radius: 0.5rem;
}
.list-item:first-child {
  margin-top: 0;
}
.image_6 {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
}
.group_4 {
  // width: 9.63rem;
  width: 100%;
  flex: 1;
}
.font_3 {
  font-size: 0.88rem;
  font-family: PingFang SC;
  //line-height: 0.81rem;
  font-weight: 500;
  color: #222222;
  max-width: 100%;
  word-break: break-all;
}
.font_4 {
  font-size: 0.69rem;
  font-family: PingFang SC;
  line-height: 0.53rem;
  color: #008a7f;
}
.group_5 {
  padding-left: 0.16rem;
}
.group_6 {
  padding-bottom: 0.13rem;
  width: 3rem;
}
.image_7 {
  width: 0.56rem;
  height: 0.53rem;
}
.font_6 {
  font-size: 0.69rem;
  font-family: PingFang SC;
  line-height: 0.69rem;
  color: #999999;
  white-space: nowrap;
}
.pos_8 {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.image_8 {
  width: 0.63rem;
  height: 0.63rem;
  margin: 0 2px;
}
.group_7 {
  // width: 5.84rem;
}
.image_9 {
  width: 0.56rem;
  height: 0.56rem;
}
.pos_9 {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.font_5 {
  font-size: 1.19rem;
  font-family: PingFang SC;
  // line-height: 0.91rem;
  max-width: 100%;
  word-break: break-all;
  color: #008a7f;
}
.text_7 {
  margin-top: 1.38rem;
}
.text-wrapper {
  padding: 0.5rem 0;
  background-image: linear-gradient(-90deg, #ff9100 0%, #ff9100 0%, #ffb421 100%);
  box-shadow: 0rem 0.063rem 0.23rem 0.015rem #ff920140;
  border-radius: 0rem 0.5rem 0rem 0.75rem;
  width: 3.53rem;
}
.pos_7 {
  position: absolute;
  right: 0;
  top: 0;
}
.font_2 {
  font-size: 0.81rem;
  font-family: PingFang SC;
  line-height: 0.69rem;
  font-weight: 500;
  color: #ffffff;
}
.text_6 {
  line-height: 0.72rem;
}
</style>
    